<template>
  <!-- Table 表格组件 -->
  <div>
    <el-table :data="newdevTable" style="width: 100%" class="tableData" :height="tableStyle.TableHight"
      :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" ref="table1">
      <!-- <el-table-column>{{newdevTable[0]}}</el-table-column> -->
      <template v-for="item in newListTable">
        <!-- 一级表头 -->
        <el-table-column v-if="item.children" width="180" align="center" :key="item.id" :prop="item.prop"
          :label="item.name">
          <!-- 二级表头 -->
          <template v-for="item_child in item.children">
            <el-table-column v-if="item_child.children" :key="item_child.childrenId" :prop="item_child.prop"
              :label="item_child.name">
              <!-- 三级表头 -->
              <template v-for="(childItem_three, index2) in item.children">
                <el-table-column v-if="childItem_three.children" :key="index2" :prop="childItem_three.prop"
                  :label="childItem_three.name"></el-table-column>
                <el-table-column v-else :label="childItem_three.name" :key="index2" align="center"
                  :type="childItem_three.type" :prop="childItem_three.prop"></el-table-column>
              </template>
            </el-table-column>
            <el-table-column v-else :label="item_child.name" :key="item_child.childrenId" align="center"
              :type="item_child.type" :prop="item_child.prop"></el-table-column>
          </template>
        </el-table-column>
        <el-table-column v-else :label="item.name" :key="item.name" align="center" :type="item.type" :prop="item.prop">
        </el-table-column>
      </template>
    </el-table>
    <slot name="tab-bttom"></slot>
  </div>
</template>

<script>
export default {
  // props: ["dataList", "devTable"], // dataList:数据列表配置对象 devTable：列表数据
  props: {
    dataList: {},
    devTable: {},
    tableStyle: {
      Type: Object,
      default() {
        return {
          TableHight: "180",
        };
      },
    },
    showSum: {
      Type: Boolean,
      default: false,
    },
    judegtable: {},
  }, // dataList:数据列表配置对象 devTable：列表数据

  data() {
    return {
      //搜索框
      // suoS: {},
    };
  },
  watch: {
    judegtable(newVal) {
      console.log(
        "****************************************************************************************************"
      );
      // let arr = [];
      // arr.push(newVal);
      // console.log(arr);
      // if (arr.includes(1)) {
      //   this.dataList[0].prop = "colname";
      //   this.dataList[1].prop = "pressure";
      // } else if (arr.includes(2)) {
      //   this.dataList[0].prop = "colname";
      //   this.dataList[1].prop = "flow";
      // }else if(){

      // }
      switch (newVal) {
        case 1:
          this.dataList[0].prop = "colname";
          this.dataList[1].prop = "pressure";
          break;
        case 2:
          this.dataList[0].prop = "colname";
          this.dataList[1].prop = "flow";
          break;
        case 3:
          this.dataList[0].prop = "colname";
          this.dataList[1].prop = "lastReportDate";
          this.dataList[2].prop = "last_read_num";
          this.dataList[3].prop = "useCount";

          break;
        case 6 || 9:
          this.dataList[0].prop = "colname";
          this.dataList[1].prop = "useCount";
          break;

        default:
          this.dataList[0].prop = "colname";
          this.dataList[1].prop = "avg_value0";
          this.dataList[2].prop = "max_value0";
          this.dataList[3].prop = "min_value0";
          break;
      }
      console.log(
        "****************************************************************************************************"
      );
    },
  },
  computed: {
    newdevTable() {
      return this.devTable;
    },
    newListTable() {
      return this.dataList;
    },
  },

  methods: {
    indexMethod(index) {
      return index;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-table {
  border-bottom: none;
}

// .tableData {
//   padding: 0 20px;
// }
</style>
